<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
/* 			
			.d1 .d1_1{
				height: 100px;
				width: 200px;
				background-color: aqua;
				float: left;
			}
			.d1 .d1_2{
				height: 150px;
				width: 100px;
				background-color: aquamarine;
				float: left;
			}
			.d1 .d1_3{
				height: 125px;
				width: 125px;
				background-color: burlywood;
				float: left;
			} */
			.d1{
				height: 400px;
				width: 100%;
				border: 1px solid red;
				/* float: left; */
				/*  想背景图片和 ，背景颜色  同时显现出来，必须先设置背景图片，在设置颜色  */  
				/* background: url("img/1.jpg") no-repeat; */
				background-color: rgba(0, 0, 255, 0.2);
				/* background-repeat: repeat-y; */
			}
			.d1 .d1_1{
				width: 300px;
				height: 300px;
				border: 1px solid #000;
				background-image: url("img/mr.png") ;
				background-repeat: no-repeat;
				background-position: left top;
				background-position: center center;
				background-position: 0px 0px;
				float: left;
			}
			.d1 .d1_2{
				width: 128px;
				height: 384px;
				background: url("img/icon.png") no-repeat;
				background-color: aquamarine;
				float: left;
			}
			.d1 .d1_2:hover{
				background-position: -128px ;
			}
			
			
			
			/* ----------------精灵图------------------------ */
			.d2{
				height: 128px;
				width: 128px;
				background-image: url("img/icon.png");
				background-repeat: no-repeat;
				background-position: 0px 0px;
			}
			.d2:hover{
				background-image: url("img/icon.png");
				background-position: -128px 0px;
			}
			/* ---------------------------------- */
			.d3{
				height: 128px;
				width: 128px;
				background-image: url("img/icon.png");
				background-repeat: no-repeat;
				background-position: 0px -128px;
			}
			.d3:hover{
				background-image: url("img/icon.png");
				background-position: -128px -128px;
			}
			/* ---------------------------------- */
			.d4{
				height: 128px;
				width: 128px;
				background-image: url("img/icon.png");
				background-repeat: no-repeat;
				background-position: 0px -256px;
			}
			.d4:hover{
				background-image: url("img/icon.png");
				background-position: -128px -256px;
			}
			/* ----------------背景渐变---------------------------- */
			
			.d5{
				width: 300px;
				height: 200px;
				/* 默认的渐变效果是水平 */
				background-image: linear-gradient(#f00,orange,rgba(0,0,255),green);
				/* 渐变效果可以设置角度 */
				background-image: linear-gradient(45deg,red,orange,blue,green);
				
			}
			/* ---------------------老版本渐变-- */
			.d6{
				margin-top: 20px;
				width: 500px;
				height: 500px;
				background-image: url("./img/bgold.jpg");
			}
			.d7{
				width: 300px;
				height: 200px;
				/* 新浏览器 */
				background-image: linear-gradient(90deg,blue 0 100px,#fff 100px 200px, red 200px 300px);
				/* 老浏览器 */
				/* background-image: linear-gradient(90deg,blue 33%,#fff 33% ,#fff 67% , red 67%); */
				
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="d1">
			<div class="d1_1"></div>
					
			<div class="d1_2"></div>
										
		</div>
		
		<div class="d2"></div>
		<div class="d3"></div>	
		<div class="d4"></div>
		<div class="d5"></div>
		<div class="d6"></div>
		<div class="d7"></div>
		<div class="d8"></div>
		
	</body>
</html>